<template>
  <div class="project-model">
    <div class="model">
      <div class="part" v-for="item in partList" :key="item.id">
        <img :class="'model-part model-part'+item.id" :src="require(`../assets/svg/part${item.id}.png`)" alt="" @click="()=>handleClick(item.id)">
        <span 
          class="title" 
          :style="{top: item.top + 50 +'px', left: item.left +50+'px'}"
        >
          {{item.title}}
        </span>
      </div>
    </div>
    <div :class="ClassNames('projectList', {show: Boolean(currentId)})">
      <ProjectList/>
    </div>
  </div>
</template>

<script setup>
import ProjectList from '../containers/ProjectList.vue';
import Part1 from '../assets/svg/part1.png';
import Part2 from '../assets/svg/part2.png';
import Part3 from '../assets/svg/part3.png';
import Part4 from '../assets/svg/part4.png';
import ClassNames from 'classnames';
import { ref } from 'vue';
let currentId = ref(undefined);
const partList = [
  {id: 1, title: '厂房', image: Part1, top: 102, left: 408},
  {id: 2, title: '建筑公司', image: Part2, top: 189, left: 316},
  {id: 3, title: '景观公园', image: Part3, top: 281, left: 521},
  {id: 4, title: '道路建设', image: Part4, top: 283, left: 236}
]
function handleClick (id){
  console.log(id)
  currentId.value = id;
}
// const classNames = computed(() => ({
//   'projectList': true,
//   show: Boolean(currentId.value)
// }))
console.log('currentId', currentId.value)
</script>

<style lang='scss'>
.project-model{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.model{
  margin: 0 auto;
  width: 800px;
  height: 568px;
  background: url('../assets/svg/model2.png');
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.part{
  &:hover{
    .title{
      color: #1890ff;
      font-weight: 700;
      text-shadow: 0 0 5px #fff; 
      background: transparent;
    }
  }
}
.model-part{
  width: 196px;
  height: 176px;
  position: absolute;
  opacity:0;
  transition: all 0.2s linear;
  background-clip:content-box;
  cursor: pointer;
  &:hover{
    transform: scale(2.1);
    opacity: 1;
  }
}
  .model-part1{
    top: 102px;
    left: 408px;
  }
  .model-part2{
    top: 189px;
    left: 316px;
  }
  .model-part3{
    top: 281px;
    left: 521px;
  }
  .model-part4{
    width: 223px;
    top: 283px;
    left: 236px;
  }
  .title{
    font-size: 20px;
    position: absolute;
    color: #fff;
    pointer-events: none; /* 穿透鼠标事件 */
    background: rgba(0,0,0,0.6);
    box-shadow: 5px 5px 5px #000; 
    border-radius: 4px;
    padding: 2px 4px;
  }
  .projectList{
    width: 0;
    height: 100%;
    position: absolute;
    left: 100%;
    background: #fff;
    overflow: hidden;
  }
  .show{
    left: 0;
    width: 100%;
    transition: all 1s linear;
  }
</style>